<template>
    <div class="page-link">
        <!-- 横幅 -->
        <div class="banner-section">
            <Banner banner="banner4" />
            <div class="text-box">
                <link-banner />
            </div>
        </div>

        <div class="partner-section">
            <div class="partner-box el-box-init el-bkgd-white el-mx-1000">
                <h3 class="font-3d">我的伙伴们</h3>
                <partner :list="list" />
                <cube>
                    <color-ball />
                </cube>
            </div>

            <i class="line bg-gradient el-mx-1000"></i>
            <link-format />
        </div>
    </div>
</template>

<script>
import { link as Api } from "../api";

export default {
    data() {
        return {};
    },
    async asyncData({ app: { $axios, $localConfig }, query }) {
        const { code, msg, data } = await $axios.$get(Api.getList);

        return { list: data.list };
    },
};
</script>

<style lang="less" scoped>
.partner-section {
    padding: 0 20px;

    .partner-box {
        margin-top: 40px;
        margin-bottom: 40px;
        padding: 20px;
        min-height: 500px;
        position: relative;

        h3 {
            text-align: center;
            font-size: 28px;
            padding: 5px 0;
            font-weight: bold;
            color: #343638;
        }

        .cube {
            position: absolute;
            right: 0;
            bottom: 0;
        }

        .ball {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -25%;
        }
    }

    .line {
        display: block;
    }
}
</style>
